import React from "react";
import ReactDOM from "react-dom/client";

/**
 * state - 状态
 *    简单理解：存放数据的地方，正确的修改这个数据就能引起页面的更新。
 *    注意点：state 只存在于 类组件。函数式组件，没有 state 的玩法。（16.8.0 版本，函数式组件可以通过 hooks 去玩）
 *
 * 1. state 初始化
 *      1. 构造函数中 this.state = { xx: yy, zz: yy }
 *
 *      2. 直接赋值 state 的方式
 *
 * 2. 正确的修改 state
 *      this.state.name = xxx     可以改，但是页面不更新
 *      this.setState({
 *          name: xxx
 *      })
 */

class App extends React.Component {
  // constructor(props) {
  //   /**
  //    * 要么你就不玩构造函数，一旦玩的话，就必须接收props且super(props)且super(props)写在第一行代码上
  //    *    构造函数中将不能正确的处理 this.props
  //    *
  //    * 表现：
  //    *    1. 构造函数中，不调用 super() 会报错
  //    *    2. 构造函数中，调用 super() 但是不传递 props 参数的话，this.props 将为 undefined
  //    */
  //   super(props);
  //   // console.log("props", props);
  //   // console.log("this.props", this.props);

  //   this.state = {
  //     name: "张三",
  //     age: 18,
  //   };
  // }

  state = {
    name: "张三",
    age: 18,
  };

  handleChangeName = () => {
    /**
     * 在 react 中，没有使用 Object.definedProptry 去做数据劫持等工作。
     *
     *      要让页面更新的话，需要重新执行 render 函数（不是我们手动调用 render）
     *
     *      this.setState()  修改 state 数据，且 React 会帮我们重新触发 render
     */
    // console.log("before", this.state.name);
    // this.state.name = "李四";
    // console.log("after", this.state.name);

    this.setState({
      name: "李四",
    });
  };

  render() {
    console.log("render");
    return (
      <div>
        <h1>App</h1>
        <p>姓名：{this.state.name}</p>
        <p>年龄：{this.state.age}</p>
        <button onClick={this.handleChangeName}>点我，修改名字为李四</button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App name="张三" age="18" />);
